<template>
  <div class="tableDemo">
    <el-card :body-style="{ padding: '20px', minHeight: 'calc(100vh - 100px)' }">
      <div class="feature">
        <div>实现的功能：</div>
        <div>1：给全选的多选框后面添加文字</div>
        <div>2：根据状态显示哪些数据可以选择</div>
      </div>
      <div class="listTable">       
        <el-table
          :data="tables"
          size="mini"
          stripe
          @selection-change="slectRow"
          :row-key="getRowKeys"
          :cell-class-name="cellcb"
        >
          <el-table-column type="selection" width="65" fixed="left" :reserve-selection="true"></el-table-column>
          <el-table-column label="ID" prop="id" width="80"></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="手机号码" prop="mobile"></el-table-column>
          <el-table-column label="状态" prop="status">
            <template slot-scope="{ row }">
              <el-tag :type="getStatusTag(row.status)">{{row.status}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "tableDemo",
  components: {},
  data() {
    return {
      tables: [
        {
          id: 1,
          name: "小张",
          mobile: "13548523654",
          status: "正常"
        },
        {
          id: 2,
          name: "小李",
          mobile: "13548523654",
          status: "停用"
        },
        {
          id: 3,
          name: "小红",
          mobile: "13548523654",
          status: "正常"
        },
        {
          id: 4,
          name: "小黄",
          mobile: "13548523654",
          status: "停用"
        }
      ],
      selectedIdArr: []
    };
  },
  methods: {

    getRowKeys(row) {
      return row.id;
    },

    //多选框选择事件
    slectRow(rows) {
      /**
       * 停用的列表数据只是用样式隐藏了多选框，点击全选的时候还是会选择停用的数据，
       * 所以要过滤出状态为正常的列表数据
       */
      this.selectedIdArr = rows.filter((elem, index, array) => {
        return elem.status === "正常";
      });
      console.log(this.selectedIdArr);
    },

    //控制多选框的显示隐藏
    cellcb(row) {
      if (row.row.status !== "正常" && row.columnIndex === 0) {
        return "myCell";
      }
    },

    //状态
    getStatusTag(type) {
      switch (type) {
        case "正常":
          return "blue";
          break;
        case "停用":
          return "danger";
          break;
        default:
          break;
      }
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.feature{
  text-align: left;
  margin-bottom: 20px;
  line-height: 22px;
  font-size: 14px;
}
.listTable ::v-deep .myCell > .cell .el-checkbox__inner {
  display: none;
}
.listTable ::v-deep .cell .el-checkbox__inner {
  border: 1px solid #9e9ea0;
}
.listTable ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  border: 1px solid #f2783c;
  background-color: #f2783c;
}
.listTable ::v-deep .is-indeterminate .el-checkbox__inner {
  border: 1px solid #f2783c;
  background-color: #f2783c;
}
//用伪类给多选框后面加文字‘全选’，elementui的table中，多选框没有属性可添加文本，所以只能通过伪类添加
.listTable
  ::v-deep
  .el-table__header
  .el-table-column--selection
  .cell
  .el-checkbox:after {
  content: "全选";
  color: #909399;
  font-size: 12px;
  margin-left: 5px;
  font-weight: bold;
}
</style>
